﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UIMapForm.aspx.cs"
 Inherits="UILGestion.VentaAdmin.UI.UIMapForm" %>
<%@ Register src="../../Control/menuCtrl.ascx" tagname="menuCtrl" tagprefix="cc1" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register Assembly="MapControl" Namespace="MapControl" TagPrefix="cc1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register Assembly="WebLib" Namespace="WebLib" TagPrefix="lib" %>





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="stylesheet" type="text/css" href="../../estilos/_common/styles/fonts.css" />
 <link rel="stylesheet" type="text/css" href="../../estilos/_common/styles/global.css" />
 <link rel="stylesheet" type="text/css" href="../../estilos/_common/styles/theme.css" />
    <title>MAPA:Ubicacion</title>
    <script src="../../Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>


 <%--<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
  <script type='text/javascript' src="http://www.outsharked.com/scripts/dev/jquery.imagemapster.js"></script>--%>
    <script type="text/javascript" src="../../Scripts/src/redist/when.js"></script>
<script type="text/javascript" src="../../Scripts/src/core.js"></script>
<script type="text/javascript" src="../../Scripts/src/graphics.js"></script>
<script type="text/javascript" src="../../Scripts/src/mapdata.js"></script>
<script type="text/javascript" src="../../Scripts/src/areadata.js"></script>
<script type="text/javascript" src="../../Scripts/src/areacorners.js"></script>
<script type="text/javascript" src="../../Scripts/src/scale.js"></script>
<script type="text/javascript" src="../../Scripts/src/tooltip.js"></script>


    </head>
<body>
    <form id="form1" runat="server" style="background-color:White">  <input id="internalID" type="hidden" runat="server" />

     <input id="idEtapa" type="hidden" runat="server" />
     <input id="paginaAnt" type="hidden" runat="server" />
     <input id="idProyecto" type="hidden" runat="server" />
   <cc1:menuCtrl ID="menuCtrl1" runat="server" />
   <asp:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server" 
      EnableScriptGlobalization="true"  
     EnablePartialRendering="true" />
         <asp:Panel ID="pnlMain" runat="server"
  CssClass="Heading secTitle AreaHeading ms-crm-List-Header">


  <asp:Label ID="Label2" runat="server" Text="PROYECTO" 
             style="font-size: large; color: #960818"></asp:Label>
 </asp:Panel>
  









<script type="text/javascript">
    if (window.Zepto) {
        jQuery = Zepto;
        (function ($) {
            if ($) {
                $.fn.prop = $.fn.attr;
            }
        } (jQuery));
    }

    $(document).ready(function () {

        var $statelist, $usamap, ratio,
        mapsterConfigured = function () {
            // set html settings values
            var opts = $usamap.mapster('get_options', null, true);
            if (!ratio) {
                ratio = $usamap.width() / $usamap.height();
            }

        },
        default_options =
        {
            fillOpacity: 0.2,

            //render_zoom: {
            //    altImage: 'images/usa_map_huge.jpg'
            //},
            fadeInterval: 50,
            isSelectable: true,
            staticState: false,
            singleSelect: true,
            mapKey: 'state',
            mapValue: 'full',
            listKey: 'name',
            listSelectedAttribute: 'checked',
            sortList: "asc",
            onGetList: addCheckBoxes,

            onConfigured: mapsterConfigured,
            showToolTip: false,
            toolTipClose: ["area-mouseout"],
            areas: [

                { key: "Separado",
                    fillColor: 'FFCC00',
                    isSelectable: false,
                    staticState: true
                },
                { key: "Vendido",
                    fillColor: '008000',
                    isSelectable: false,
                    staticState: true
                },
                { key: "Disponible",
                    fillColor: 'ff000c',

                    staticState: true
                }
                ]
        };


        function addCheckBoxes(items) {
            var item, selected;
            $statelist.children().remove();
            for (var i = 0; i < items.length; i++) {
                selected = items[i].isSelected();
                item = $('<div><input type="checkbox" name="' + items[i].key + '"' + (selected ? "checked" : "") + '><span class="sel" key="' + items[i].key + '">' + items[i].value + '</span></div>');

                $statelist.append(item);
            }
            $statelist.find('span.sel').unbind('click').bind('click', function (e) {
                var key = $(this).attr('key');
                $usamap.mapster('highlight', true, key);
            });
            // return the list to mapster so it can bind to it
            return $statelist.find('input[type="checkbox"]').unbind('click').click(function (e) {
                var selected = $(this).is(':checked');
                $usamap.mapster('set', selected, $(this).attr('name'));
                styleCheckbox(selected, $(this));
            });
        }
        function styleCheckbox(selected, $checkbox) {
            nowWeight = selected ? "bold" : "normal";
            $checkbox.closest('div').css("font-weight", nowWeight);
        }

        $statelist = $('#statelist');
        $usamap = $('#map');
        $mapDepartamentos = $('#mapDepartamentos');

        function bindlinks() {
            $('*').unbind();
            $("#unbind_link").bind("click", function (e) {
                e.preventDefault();
                $usamap.mapster("unbind");
                $usamap.width(720);
                bindlinks();
            });
            $("#rebind_link").bind("click", function (e) {
                e.preventDefault();
                $usamap.mapster(default_options);
            });

            $("#unbind_link_preserve").bind("click", function (e) {
                e.preventDefault();
                $usamap.mapster("unbind", true);
                bindlinks();
            });
            $("#tooltip").bind("click", function (e) {
                e.preventDefault();
                var state = !$usamap.mapster('get_options').showToolTip;
                $('#tooltip_state').text(state ? "enabled" : "disabled");
                $usamap.mapster("set_options", { showToolTip: state });
            });
            $("#show_selected").bind("click", function (e) {
                e.preventDefault();
                $('#selections').text($("#usa_image").mapster("get"));
            });
            $("#single_select").bind("click", function (e) {
                e.preventDefault();
                var state = !$usamap.mapster('get_options').singleSelect;
                $('#single_select_state').text(state ? "enabled" : "disabled");
                $usamap.mapster("set_options", { singleSelect: state });
            });
            $("#is_deselectable").bind("click", function (e) {
                e.preventDefault();
                var state = !$usamap.mapster('get_options').isDeselectable;
                $('#is_deselectable_state').text(state ? "enabled" : "disabled");
                $usamap.mapster("set_options", { isDeselectable: state });
            });
            function getSelected(sel) {
                var item = $();
                sel.each(function () {
                    if (this.selected) {
                        item = item.add(this);
                        return false;
                    }

                });
                return item;

            }

            function getFillOptions(el) {
                var new_options,
					val = getSelected($(el).find("option")).val();

                if (val > "0") {
                    new_options = {
                        altImage: 'images/usa_map_720_alt_' + val + '.jpg',
                        stroke: true
                    };
                } else {
                    new_options = {
                        altImage: null,
                        stroke: false
                    };
                }
                return new_options;
            }

            function getNewOptions() {
                var options,
                    render_highlight = getFillOptions($('#highlight_style')),
                    render_select = getFillOptions($('#select_style'));

                options = $.extend({},
                	default_options,
                	{
                	    render_select: render_select,
                	    render_highlight: render_highlight
                	});

                return options;

            }
            $("#highlight_style, #select_style").bind("change", function (e) {
                e.preventDefault();
                $statelist.children().remove();

                $usamap.mapster(getNewOptions());

            });
            $("#update").click(function (e) {
                var newOpts = {};
                function setOption(base, opt, value) {
                    if (value !== '' && value !== null) {
                        base[opt] = value;
                    }
                }
                e.preventDefault();

                newOpts.render_highlight = {};
                setOption(newOpts.render_highlight, "stroke", $('#stroke_highlight').prop("checked"));

                setOption(newOpts.render_highlight, "strokeWidth", $('#strokewidth_highlight').val());
                setOption(newOpts.render_highlight, "fillOpacity", $('#fill_highlight').val());
                setOption(newOpts.render_highlight, "strokeOpacity", $('#strokeopacity_highlight').val());

                newOpts.render_select = {};
                setOption(newOpts.render_select, "stroke", $('#stroke_select').prop("checked"));
                setOption(newOpts.render_select, "strokeWidth", $('#strokewidth_select').val());
                setOption(newOpts.render_select, "fillOpacity", $('#fill_select').val());
                setOption(newOpts.render_select, "strokeOpacity", $('#strokeopacity_select').val());

                var width = parseInt($('#img_width').val(), 10);

                if ($usamap.width() != width) {
                    $usamap.mapster('resize', width, null, 1000);
                } else {
                    $usamap.mapster('set_options', newOpts);
                }

            });

        };

        bindlinks();
        $.mapster.impl.init();
        $usamap.mapster(default_options);
        $mapDepartamentos.mapster(default_options);


    });


    // Utility functions
    // If you are copying code you probably won't need these.


    var utils = {};
    // Tells if an element is completely visible. if the 2nd parm is true, it only looks at the top.

    utils.isScrolledIntoView = function (elem, topOnly, container) {
        var useWindow = false, docViewTop, docViewBottom, elemTop, elemBottom;

        if (!container) {
            container = window;
            useWindow = true;
        }


        if (useWindow) {
            docViewTop = $(container).scrollTop();
            elemTop = elem.offset().top;
        } else {
            docViewTop = 0;
            elemTop = elem.position().top;
        }
        docViewBottom = docViewTop + $(container).height();
        elemBottom = elemTop + elem.height();


        if (topOnly) {
            return elemTop >= docViewTop && elemTop <= docViewBottom;
        } else {
            return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
        }
    };

    utils.centerOn = function ($container, $element) {
        $container.animate({
            scrollTop: $element.position().top - ($container.height() / 2)
        }, 'slow');
    };

</script>


  <input id="idEtapaSeleccion" type="hidden" runat="server" />
<table  id="principal" border="0" cellspacing="0" cellpadding="0" width="1000px" style="background-color:White">
  <tr>
  <td colspan="2">
  <asp:LinkButton runat="server" ID="proyectoLBTN" Text="Ver Proyecto" ForeColor="Blue"  onclick="LBTN_Click"  />  ==>
  <asp:LinkButton runat="server" ID="etapaLBTN" Text="" ForeColor="Blue" 
          onclick="LBTN_Click"   />
  </td>
  
  </tr>
  <tr>
    <td valign="top"   align="left"  valign="top" >
         
     <asp:Panel class='map' ID="Panelmain" runat="server"  BorderColor="LightBlue" BorderWidth="1" align="center" >     
     
        <cc1:ImageMap runat="server"    
         border="0"  id="map"/>
        
</asp:Panel>
    </td>
    <td valign="top" width="300px"   >
    <asp:UpdatePanel ID="detalleUNPL" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    
    <asp:Panel ID="modeloPNL" runat="server"  BorderColor="LightBlue" BorderWidth="1" align="center" >
    <asp:Panel class="SystemWideDuplicateDetection_td_header" ID="cabTorre" runat="server" 
            CssClass="selectedItem">
        <asp:Label ID="torreoLBL" runat="server" Text=""></asp:Label></asp:Panel>
 <div class='map' style='display: block; repeat scroll 0% 0% transparent; position: relative; padding: 0px; width: 221px; height: 215px;'>
<canvas height='215' width='221' style='position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none; opacity: 1;'></canvas>
<canvas width='221' height='215' style='width: 221px; height: 215px; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none; opacity: 1;'>
<v:rect></v:rect></canvas>
        <cc1:ImageMap ID="mapDepartamentos" runat="server" />



        </asp:Panel>
   <br />
         <asp:Panel runat="server" ID="datosPNL" BorderColor="LightBlue" BorderWidth="1" align="center">
         <asp:Panel class="SystemWideDuplicateDetection_td_header" ID="cabUI" runat="server" 
            CssClass="selectedItem">
             <asp:Label ID="UILBL" runat="server" Text=""></asp:Label></asp:Panel>

              <asp:UpdatePanel ID="uiDetalleUPNL" runat="server" UpdateMode="Conditional">
    <ContentTemplate>

            <table class="ui-accordion">
                <tr>
                    <td align="right" bgcolor="#FFCCFF" width="100px">
                        Tipo UI:</td>
                    <td align="left">
                        <asp:Label ID="tipoUILBL" runat="server"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td align="right" bgcolor="#FFCCFF" width="100px">
                        Codigo:</td>
                    <td align="left">
                       <b> <asp:Label ID="codigoLBL" runat="server"></asp:Label></b>
                        <input id="idUI" type="hidden" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td align="right" bgcolor="#FFCCFF" width="100px">
                        Localizacion:</td>
                    <td align="left">
                        <asp:Label ID="localizacionLBL" runat="server"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td align="right" bgcolor="#FFCCFF" width="100px">
                        Bloque/piso:</td>
                    <td align="left">
                        <asp:Label ID="bloqueLBL" runat="server"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td align="right" bgcolor="#FFCCFF" width="100px">
                        Estado:</td>
                    <td align="left">
                     <b>   <asp:Label ID="estadoLBL" runat="server"></asp:Label></b>
                    </td>
                </tr>
                <tr>
                    <td align="right" bgcolor="#FFCCFF" width="100px">
                        Modelo:</td>
                    <td align="left">
                        <asp:Label ID="modeloLBL" runat="server"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td align="right" bgcolor="#FFCCFF" width="100px">
                        Area:</td>
                    <td align="left">
                        <asp:Label ID="areaLBL" runat="server"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td align="right" bgcolor="#FFCCFF" width="100px">
                        Precio:</td>
                    <td align="left">
                        <asp:Label ID="precioLBL" runat="server"></asp:Label>
                    </td>
                </tr>
            </table>

            </ContentTemplate>
            <Triggers>
            <asp:AsyncPostBackTrigger ControlID="mapDepartamentos" />
            </Triggers>
            </asp:UpdatePanel>
            
        </asp:Panel>
     <br />
        
            <asp:Panel ID="botonesPNL" runat="server">
                <table>
                    <tr>
                        <td class=" ms-crm-Dialog-Footer-Right">
                            <asp:Button ID="proformarBTN" runat="server"   OnClientClick="return confirm('Desea generar una Proforma?')" 
                                CssClass="ms-crm-List-Header" Text="Generar Proforma" 
                                onclick="BTN_Click" />
                            &nbsp;
                            <asp:Button ID="ventaBTN" runat="server"  onclick="BTN_Click" OnClientClick="return confirm('Desea generar una Orden Venta?')" 
                                CssClass="ms-crm-List-Header" Text=" Generar OrdenVenta" />
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </asp:Panel>

    </ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="map" />
    </Triggers>
    </asp:UpdatePanel>


        </td>
    </tr>
  
</table>


  




  
   
 </form>
  
</body>
</html>
